<template>
	<view class="details">
		<view class="headf">
			<view class="boxkl" :style="{ 'margin-top': zhuangtai + 'px' }">
				<view class="fanhui" @click="back"></view>
				<view class="titlk">礼服详情</view>
			</view>
		</view>
		<view class="headf" style="position: unset; opacity: 0">
			<view class="boxkl" :style="{ 'margin-top': zhuangtai + 'px' }">
				<view class="fanhui"></view>
				<view class="titlk">礼服详情</view>
			</view>
		</view>
		<view class="big_box">
			<view class="bimg-box">
				<video v-if="v_show == true" class="w100 h100" show-mute-btn="true" :controls="controls" enable-play-gesture="true" :src="listcontent.video_src"></video>
				<swiper v-if="v_show == false" class="swiper w100 h100" :indicator-dots="false" :autoplay="false" :interval="1500" :duration="300">
					<swiper-item v-for="(item, index) in listcontent.images_src" :key="index">
						<image class="w100 h100" :src="item" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="bnmk">
				<view class="btn" :class="{ check: numid == 1 }" @click="change(1)">视频</view>
				<view class="su"></view>
				<view class="btn" :class="{ check: numid == 2 }" @click="change(2)">图片</view>
			</view>
		</view>

		<view style="background: #fff">
			<view class="price">
				<view class="pl">
					<view class="fu">￥</view>
					{{ listcontent.price }}
				</view>
				<view class="pr" @click="fenXiang">
					<view class="pr_icon"></view>
					分享
				</view>
			</view>
			<view class="title">{{ listcontent.title }}</view>
		</view>
		<view class="shopdeta">商品详情</view>
		<view class="deta_box">
			<bctos-rich-text :nodes="listcontent.content"></bctos-rich-text>
		</view>

		<view class="buy_box">
			<view class="buy" @click="orshow = true">预约</view>
		</view>
		<view style="height: 110rpx"></view>

		<!-- 弹窗 -->

		<view class="price_popup" v-show="orshow" @click.stop="orshow = false">
			<view class="box_inp" @click.stop>
				<view class="inph">
					<view class="icon" @click="orshow = false"></view>
				</view>
				<view class="titled">预约后，商家会安排专业顾问致电您～</view>

				<view class="inpd">
					<input class="inpty" v-model="name" placeholder="怎么称呼您？" placeholder-class="inps" />
				</view>
				<view class="inpd">
					<input class="inpty" v-model="phone" placeholder="您的联系方式" placeholder-class="inps" maxlength="11" />
				</view>
				<view class="inpd" style="overflow: hidden">
					<view class="head_riqi_box flex" style="flex: 1">
						<uni-datetime-picker :placeholder="'开始时间'" type="date" :value="startTime" start="2021-3-20" end="2111-6-30" @change="changeTime" style="width: 50%; flex: 1" />
						<view class="zhi_txt s26 family f500">至</view>
						<uni-datetime-picker :placeholder="'结束时间'" type="date" :value="endTime" start="2021-3-20" end="2111-6-30" @change="changeTime1" style="width: 50%; flex: 1" />
					</view>
				</view>
				<view class="enty" @click="enter">确定</view>
			</view>
		</view>

		<!-- 弹框 -->
		<view class="price_popup" v-show="tshow" @click="tshow = false">
			<view class="tikun" @click.stop="">
				<view class="txt">{{ code == '1' ? '请保持电话畅通，工作人员稍后联系您～' : '不可重复预约' }}</view>
				<view class="ent" @click="tshow = false">确认</view>
			</view>
		</view>
		<view class="kefu flex" @click="onPhone">
			<view class="kefu_img">
				<image class="w100 h100" src="@/static/kefu.png" mode=""></image>
			</view>
			<view class="kefu_txt s28 family f500">客服</view>
		</view>
		<view class="price_popup" v-if="selectTime" @click="selectTime = false">
			<view style="position: absolute; bottom: 0" @click.stop="">
				<view class="head_riqi_box w750 flex">
					<uni-datetime-picker type="date" :value="startTime" start="2021-3-20" end="2111-6-30" @change="changeTime" style="width: 50%; flex: 1" />
					<view class="zhi_txt s26 family f500">至</view>
					<uni-datetime-picker type="date" :value="endTime" start="2021-3-20" end="2111-6-30" @change="changeTime1" style="width: 50%; flex: 1" />
					<view class="shaixuan_btn s24 family f500 txtali" @click.stop="screenTime">确定</view>
				</view>
				<view style="height: 100rpx; background: #fff"></view>
			</view>
		</view>
		<!-- 分享 -->
		<share-box ref="child" :type="shareType"></share-box>
	</view>
</template>

<script>
import shareBox from '@/components/share.vue'; //分享
export default {
	data() {
		return {
			numid: 1, //1视频 2图片
			orshow: false, // 预约弹窗
			tshow: false, //预约成功弹窗
			zhuangtai: '', //状态栏高度
			listid: '',
			listcontent: {},
			v_show: true, //true 视频 false 图片
			name: '', //姓名
			phone: '', //联系方式
			selectTime: false, //选择时间
			time: '', //日期
			startTime: '',
			endTime: '',
			code: '', //是否预约  1 没有
			kefuTel: '',
			shareType: 6
		};
	},
	components: {
		shareBox
	},
	computed: {},
	onLoad(option) {
		if (option.shop_id) {
			this.$store.state.shopsname.id = option.shop_id;
		}
		this.listid = option.id;
		let system = uni.getSystemInfoSync();
		this.zhuangtai = system.statusBarHeight;
		this.getlistcon();
		this.getKefuTel();
	},
	mounted() {},
	methods: {
		// 点击分享按钮
		fenXiang() {
			this.$refs.child.xianshi(this.listid);
		},
		//选择时间
		changeTime(e) {
			this.startTime = e;
			this.time = this.startTime + '至' + this.endTime;
		},
		changeTime1(e) {
			this.endTime = e;
			this.time = this.startTime + '至' + this.endTime;
		},
		screenTime() {
			this.time = this.startTime + '至' + this.endTime;
			this.selectTime = false;
			this.orshow = true;
		},
		// 点击客服
		onPhone() {
			uni.makePhoneCall({
				phoneNumber: this.kefuTel
			});
		},
		change(e) {
			this.numid = e;
			if (e == 1) {
				this.v_show = true;
			} else {
				this.v_show = false;
			}
		},
		back() {
			uni.navigateBack();
		},
		getlistcon() {
			this.$request({
				url: 'wedding/dress_info',
				method: 'POST',
				data: {
					id: this.listid
				}
			}).then((res) => {
				res.data.data.content = res.data.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
					var img = `<img style="display: block; width: 100%;" src="${capture}">`;
					return img;
				});
				res.data.data.content = res.data.data.content.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
					var video = `<video style="display: block; width: 100%;" src="${capture}">`;
					return video;
				});
				this.listcontent = res.data.data;
				if (!this.listcontent.video_src || 'https://sz.vvv5g.com' == this.listcontent.video_src) {
					this.change(2);
				}
			});
		},
		// 确定预约
		enter() {
			if (!uni.getStorageSync('userInfo').id) {
				this.$wanlshop.msg('请先登录再操作');
				return;
			}
			if (this.name === '') {
				this.$wanlshop.msg('请输入姓名');
				return;
			}
			if (this.phone === '') {
				this.$wanlshop.msg('请输入联系方式');
				return;
			}
			if (this.startTime === '') {
				this.$wanlshop.msg('请选择开始时间');
				return;
			}
			if (this.endTime === '') {
				this.$wanlshop.msg('请选择结束时间');
				return;
			}
			this.selectTime = false;
			this.orshow = true;
			this.$request({
				url: 'wedding/dress_appointment',
				method: 'POST',
				data: {
					shop_id: this.$store.state.shopsname.id,
					to_id: this.listid,
					user_id: uni.getStorageSync('userInfo').id,
					time_star: this.startTime,
					time_end: this.endTime,
					phone: this.phone,
					name: this.name,
					type: 0
				}
			}).then((res) => {
				this.code = res.data.code;
				this.orshow = false;
				this.tshow = true;
			});
		},
		// 获取客服手机号
		getKefuTel() {
			this.$request({
				url: 'partners/config',
				method: 'POST',
				data: {}
			}).then((res) => {
				this.kefuTel = res.data.data.tel_phone;
			});
		}
	}
};
</script>
<style>
page {
	background: #aeaeae;
}
</style>
<style scoped lang="scss">
.headf {
	position: fixed;
	border-top: 1rpx solid transparent;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 99;
	background: #fff;

	.boxkl {
		width: 100%;
		height: 88upx;
		position: relative;
		display: flex;

		.fanhui {
			width: 36upx;
			height: 36upx;
			background: url(../../static/tab_jian.png) no-repeat center;
			background-size: 100%;
			margin-left: 28upx;
			margin-top: 26upx;
		}

		.titlk {
			height: 88upx;
			line-height: 88upx;
			margin-left: 12upx;
			font-size: 32upx;
			color: #000;
		}
	}
}

.big_box {
	width: 750upx;
	height: 750upx;
	background: #7d7c80;
	position: relative;

	.bimg-box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.v_show {
			width: 100%;
			height: 100%;
		}

		.i_show {
			width: 100%;
			height: 100%;
		}
	}

	.bnmk {
		position: absolute;
		width: 300upx;
		height: 48upx;
		display: flex;
		left: 50%;
		margin-left: -150upx;
		bottom: 26upx;
		justify-content: space-between;

		.btn {
			width: 116upx;
			height: 48upx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 24upx;
			border: 2upx solid rgba(255, 255, 255, 0.3);
			text-align: center;
			line-height: 48upx;
			color: #fff;
			font-size: 24upx;

			&.check {
				background: rgba(0, 0, 0, 0.5);
			}
		}

		.su {
			width: 1upx;
			height: 25upx;
			background: #fff;
			margin-top: 11upx;
		}
	}
}

.price {
	width: 690upx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding-top: 20upx;

	.pl {
		color: #ff3f4a;
		font-size: 42upx;
		font-weight: 550;

		.fu {
			font-size: 32upx;
			display: inline-block;
		}
	}

	.pr {
		margin-top: 10upx;
		color: #000;
		font-size: 28upx;

		.pr_icon {
			width: 27upx;
			height: 27upx;
			background: url(../../static/fullDress/share.png) no-repeat center;
			background-size: 100%;
			display: inline-block;
			vertical-align: middle;
			margin-top: -8upx;
			margin-right: 8upx;
		}
	}
}

.title {
	width: 690upx;
	margin: 0 auto;
	color: #000;
	font-size: 32upx;
	line-height: 50upx;
	margin-top: 20upx;
	padding-bottom: 42upx;
}

.shopdeta {
	width: 100%;
	height: 72upx;
	background: #f4f4f4;
	text-align: center;
	color: #333;
	font-size: 24upx;
	line-height: 72upx;
}

.deta_box {
	width: 750upx;
	background: #aeaeae;
}

.buy_box {
	height: 90upx;
	background: #fff;
	padding-top: 10rpx;
	width: 100%;
	left: 0;
	bottom: 0;
	position: fixed;

	.buy {
		width: 686upx;
		height: 80upx;
		background: #111;
		border-radius: 40upx;
		margin: 0 auto;
		color: #fff;
		font-size: 28upx;
		line-height: 80upx;
		text-align: center;
	}
}

.price_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(17, 17, 17, 0.5);

	.box_inp {
		width: 100%;
		background: #fff;
		position: absolute;
		height: 700upx;
		left: 0;
		bottom: 0;
		border-radius: 32upx 32upx 0px 0px;
		animation: move 0.2s 0s linear normal;

		.inph {
			background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%);
			height: 100upx;
			border-radius: 32upx 32upx 0px 0px;

			.icon {
				width: 36upx;
				height: 36upx;
				background: url(../../static/tab_jian.png) no-repeat center;
				background-size: 100%;
				margin-left: 28upx;
				padding-top: 42upx;
			}
		}

		.titled {
			width: 686upx;
			margin: 0 auto;
			color: #111;
			margin-top: 10upx;
			font-size: 30upx;
		}

		.inpd {
			width: 686upx;
			border-radius: 40upx;
			border: 1px solid #ccc;
			margin: 0 auto;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;

			.inpty {
				margin-left: 36upx;
				height: 80upx;
				background: transparent;
				width: 90%;
				color: #000;
				font-size: 28rpx;
			}

			.inps {
				color: #ccc;
				font-size: 28rpx;
			}

			.ickl {
				width: 38rpx;
				height: 38rpx;
				margin-right: 36rpx;
				margin-top: 21rpx;
				background: url(../../static/Vector.png) no-repeat center;
				background-size: 100%;
			}
		}

		.enty {
			width: 686upx;
			height: 80upx;
			background: #111;
			border-radius: 40upx;
			margin: 0 auto;
			margin-top: 64upx;
			color: #fff;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
		}
	}

	@keyframes move {
		from {
			height: 0upx;
		}

		to {
			height: 700upx;
		}
	}
}

.tikun {
	width: 468upx;
	background: #ffffff;
	border-radius: 32upx;

	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -234upx;
	margin-top: -135upx;

	.txt {
		width: 354upx;
		text-align: center;
		color: #000;
		font-size: 30upx;
		margin: 0 auto;
		padding-top: 50upx;
		font-weight: 550;
		line-height: 50rpx;
	}

	.ent {
		border-top: 2upx solid #f4f4f4;
		text-align: center;
		margin-top: 30upx;
		line-height: 92upx;
		font-size: 32upx;
		color: #ebbe87;
	}
}
.kefu {
	width: 160upx;
	height: 76upx;
	background: rgba(72, 157, 218, 0.6);
	box-shadow: 0upx 0upx 14upx 2upx rgba(0, 0, 0, 0.18);
	border-radius: 37upx 0upx 0upx 37upx;
	position: fixed;
	right: 0;
	top: 865upx;
	z-index: 999;

	.kefu_img {
		width: 40upx;
		height: 33upx;
		margin-top: 20upx;
		margin-left: 20upx;
	}

	.kefu_txt {
		color: #fff;
		margin-top: 20upx;
		margin-left: 16upx;
	}
}

// 选择日期
.head_riqi_box {
	background: #fff;

	/deep/ .uni-date-x--border {
		border: none !important;
	}

	.zhi_txt {
		width: 30rpx;
		color: #000;
		line-height: 76rpx;
	}

	.shaixuan_btn {
		width: 104upx;
		height: 50upx;
		background: #666;
		border-radius: 25upx;
		line-height: 50upx;
		color: #fff;
		margin-top: 18upx;
		margin-left: 6upx;
	}
}
</style>
